<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-uploader :after-read="afterRead">
            <van-image round class="avatar" :src="$store.state.userImgUrl" />
          </van-uploader>
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="userObj.name"
        @click="editUserNameFn"
      />
      <van-cell title="性别" is-link :value="sexObj[userObj.gender]" @click="editUserSexFn" />
      <van-cell
        title="生日"
        is-link
        :value="userObj.birthday"
        @click="editUserBirthdayFn"
      />
    </van-cell-group>

    <!-- 修改名称弹框 -->
    <van-dialog
      v-model="show"
      title="修改名称"
      show-cancel-button
      :before-close="beforeCloseFn"

    >
      <input type="text" v-focus v-model="userName" />
    </van-dialog>

    <!-- 修改生日 -->
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="editPopupDateFn"
        @cancel="closePopupFn"
      />
    </van-popup>

    <!-- 修改性别 -->
    <van-action-sheet v-model="showSex" :actions="actions" @select="onSelect" cancel-text="取消" />
  </div>
</template>

<script>
import { getProfileAPI, editUserPhoto, editUserInfoAPI } from '@/api'
import dayjs from 'dayjs'
import { mapMutations } from 'vuex'
export default {
  name: 'UserEdit',
  data () {
    return {
      userObj: {},
      sexObj: {
        1: '女',
        0: '男'
      },
      show: false,
      showPopup: false,
      userName: '',
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      showSex: false,
      actions: []
    }
  },
  async created () {
    const res = await getProfileAPI()
    this.userObj = res.data.data
    this.actions.push({
      name: this.sexObj[1]
    }, {
      name: this.sexObj[0]
    })
    this.setUserImgUrlMUtations(this.userObj.photo)
    // this.setUserNameMUtations(this.userObj.name)
    // console.log(this.$store.state.userImgUrl)
    // this.userName = this.userObj.name
  },
  methods: {
    ...mapMutations(['setUserImgUrlMUtations', 'setUserNameMUtations']),
    // 返回 Promise
    async afterRead (file) {
      //   console.log(file.file)
      const formData = new FormData()
      // 加入参数名和值
      formData.append('photo', file.file)
      const res = await editUserPhoto(formData)
      // console.log(res)
      this.userObj.photo = res.data.data.photo
      this.setUserImgUrlMUtations(this.userObj.photo)
    },
    async editUserNameFn () {
      this.show = true
      this.userName = this.userObj.name
    },
    async beforeCloseFn (action, done) {
      if (action === 'cancel') {
        done()
      } else {
        // 正则校验
        if (/^[A-Za-z\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
          await editUserInfoAPI({
            name: this.userName
          })
          done()
          this.userObj.name = this.userName
          this.setUserNameMUtations(this.userObj.name)
        } else {
          done(false)
          this.$notify({
            type: 'warning',
            message: '只允许输入7位字母或者数字'
          })
        }
      }
    },
    editUserBirthdayFn () {
      this.showPopup = true
      this.currentDate = dayjs(this.userObj.birthday).format('YYYY-MM-DD')
    },
    async editPopupDateFn () {
      await editUserInfoAPI({
        birthday: dayjs(this.currentDate).format('YYYY-MM-DD')
      })
      this.showPopup = false
      this.userObj.birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
    },
    closePopupFn () {
      this.showPopup = false
    },
    // 修改性别
    editUserSexFn () {
      this.showSex = true
    },
    async onSelect (item) {
      // console.log(item)
      if (item.name === '女') {
        await editUserInfoAPI({
          gender: 1
        })
        this.sexObj[this.userObj.gender] = '女'
        this.showSex = false
      }
      if (item.name === '男') {
        await editUserInfoAPI({
          gender: 0
        })
        this.sexObj[this.userObj.gender] = '男'
        this.showSex = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
/deep/ .van-icon-arrow-left {
  color: white !important;
}

/deep/ .van-dialog__content {
  text-align: center;
}
/deep/ .van-dialog__content input {
  text-align: center;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: #e0e0e0;
}
</style>
